<template>
  <div>
    <!-- mui 中  card.html 页面的案例 -->
    <!-- 商品轮播图区域 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <swiper :imgList="Rotation"></swiper>
        </div>
      </div>
    </div>

    <!-- 商品购买区域 -->

    <div class="mui-card">
      <div class="mui-card-header">页眉</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）</div>
      </div>
    </div>

    <!-- 商品参数区域 -->

    <div class="mui-card">
      <div class="mui-card-header">页眉</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）</div>
      </div>
      <div class="mui-card-footer">页脚</div>
    </div>
  </div>
</template>

<script>
import swiper from '../subComponents/swiper.vue';//导入轮播图组件
import {Toast} from 'mint-ui';
export default {
  data(){
    return{
      Rotation:[],//用于保存从后台获取到的数据
      id: this.$route.params.id,//获取路由上传过来的ID
    }
  },
  created() {
    this.getRotationPic();
  },
  methods: {
    //从后台获取轮播部分的图片
    getRotationPic(){
      this.$http.get("goods.json").then(result => {
        if(result.body){
          var obj = result.body.filter(item => {
            if (item.id == this.id) {
              return item;
            }
          })[0];
          this.Rotation = obj.pic;
        } else{
          Toast("获取数据失败!!");
        }
      })
    }
  },
  components:{
    swiper,//在vue中注册组件
  }
}
</script>


<style lang="scss" scoped>
.goodsinfo-container {
  background-color: #eee;
  overflow: hidden;

  .now_price {
    color: red;
    font-size: 16px;
    font-weight: bold;
  }

  .mui-card-footer {
    display: block;
    button {
      margin: 15px 0;
    }
  }

  .ball {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    z-index: 99;
    top: 390px;
    left: 146px;
  }
}
</style>
